<template>
  <div class="mylist">
    <group class="mycell" >
      <cell-box class="cell1" v-for="like in likeList">
        <img :src="imgUrl+like.pictureUrl" >
        <div class="more-right"  @click="goNext(like)">
          <span class="title">{{like.title}}</span>
          <span class="subtitle">{{like.roomType}}/{{like.size}}/{{like.orientedName}}/{{like.community}}</span>


          <div  class="tag">
            <div class="tag1" v-if="typeof (like.tags) != 'string' " v-for="tag in like.tags" >{{tag}}</div>
            <div class="tag1"  v-else="typeof (like.tags) == 'string' ">{{tag}}</div>
          </div>
          <span class="price">￥{{like.priceNum}}/月</span>
        </div>
      </cell-box>
    </group>
    <div id="detail" v-show="showdetail" >
      <detail :id="houseId" @close="close" ></detail>
    </div>
  </div>
</template>

<script>
  import Detail from './Detail'
  import Swiper from 'swiper'
  import { Icon } from 'vux'
  //import {Group} from 'vux'
  import CellBox from "vux/src/components/cell-box/index";
  import RectMaker from "../../js/maker/RectMaker"
  import ComplexCustomOverlay from "../../js/ComplexCustomOverlay"
  export default {
    components: { Icon,Detail},
    name: 'list',
    props: {
      likeList:
        {
          type: Array,
          default: []
        },


    },
    data () {
      return {
        showdetail:false,
        map_zoom: 31,
        center: {lng: 116.407845, lat: 39.914101},
        BMap: null,
        map: null,
        cityName: '',
        houseId: '',
        detail: {},
        //没有使用跳转的最新解决方案  压栈
        detailstack: [],
        house_selected:"",
      }
    },
    methods: {
      close(){
        this.showdetail=false
      },
      show(){
        this.showdetail=true
      },
      goNext (likeitem) {
        //把东西给父组件


        //重新加载
        this.houseId = likeitem.id;
        this.$emit("gethouseid",this.houseId)
        this.cityName=likeitem.cityName
        //进入详情页
        this.show()
        //当前城市, 还得下一个接口
        this.$http.loadData("/houses/selectByid?houseId="+this.houseId).then(
          (res)=>{
            window.localStorage["cityName"] =res.data;
            //去下一个地方
            this.$emit("show", null)
          }
        )

      },
      back () {
        if (this.detailstack.length == 1) {
          this.$emit("close", null)
        } else {
          this.detailstack.pop(this.detailstack.length - 1);
          var my = this.detailstack[this.detailstack.length - 1]
          this.likeList = my.likeList
          this.detail = my.detail
        }
      },
      map_handler ({BMap, map}) {
        this.BMap = BMap;
        this.map = map;

      },

    }
  }
</script>

<style scoped lang="less">
  #detail{
    z-index: 2 ;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top:0px;
    background-color: white;
  }
  .mylist{
    width: 100% ;
  .mycell {
    background-color: white;
    padding: 0px;
    width: 100%;
    height: 340px;
  }

  .mycell .cell1 {
    padding: 0px;
    height: 140px;
    width: 100%;
    display: flex;
    align-items: center;
  }

  .mycell .cell1 img {
    height: 100px;
    width: 38vw;
    margin-left: 10px;
  }

  .mycell .cell1 .more-right {
    height: 100px;
    width: 60vw;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .mycell .cell1 .more-right .title {
    width: 100%;
    overflow: hidden;
    height: 28px;
    line-height: 28px;
    font-size: 24px;
    font-weight: 400;
  }

  .mycell .cell1 .more-right .subtitle {
    width: 100%;
    overflow: hidden;
    height: 24px;
    font-size: 20px;
    font-weight: 100;
    color: rgba(0, 0, 0, 0.5);
  }

  .mycell .cell1 .more-right .tag {
    width: 100%;
    overflow: hidden;
    height: 24px;
    display: flex;

  }

  .mycell .cell1 .more-right .tag1 {
    line-height: 80%;
    margin-right: 10px;
    font-size: 10px;
    height: 17px;
    border-radius: 5%;
    background: rgb(215,252,252);
    color: rgb(34, 219, 117);
    text-align: center;
    line-height: 17px;
  }

  .mycell .cell1 .more-right .price {
    font-weight: 700;
    width: 100%;
    overflow: hidden;
    height: 24px;
    font-size: 20px;
    color: red;
  }
  }

</style>
